<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	</head>
	<body>
		<div class="block">
			<el-tree :data="data"
					 :expand-on-click-node="false"
					 default-expand-all
					 id="menutree"
					 node-key="id">
				<span class="custom-tree-node" slot-scope="{ node, data }">
					<span>
						<i :class="data.icon" :title="data.name" style="margin-right: 0.5rem"></i>{{ node.label }}
					</span>
					<span>
						<el-button
								@click="() => append(data)"
								size="mini"
								type="text">
							<i class="el-icon-circle-plus-outline">新增</i>
						</el-button>
						<el-button
								@click="() => modify(node, data)"
								size="mini"
								type="text">
							<i class="el-icon-delete">修改</i>
						</el-button>
						<el-button
								@click="() => remove(node, data)"
								size="mini"
								type="text">
							<i class="el-icon-delete">删除</i>
						</el-button>
					</span>
				</span>
			</el-tree>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="/res/sa.js"></script>
	<script type="module">
		let parseDataTooTree = function (arg) {
			for (let i = 0; i < arg.length; i++) {
				arg[i].label = arg[i].name;
				if (arg[i].childList && arg[i].childList == 0) {
					delete arg[i].childList;
					continue;
				}
				if (arg[i].childList) {
					parseDataTooTree(arg[i].childList);
					arg[i].children = arg[i].childList;
                }
            }
        };
        window.refreshTreeData = function () {
            $.get("/resource", function (arg) {
                if (!arg || !arg.state) {
                    return;
                } else {
                    arg = arg.data;
                }
                parseDataTooTree(arg);
                window.treeData = arg;
                Vue.set(window.treevm, "data", arg);
            });
        };
        window.loadTreeData = function () {
            sa.get("/resource", null, function (arg) {
                if (!arg || !arg.state) {
                    return;
                } else {
                    arg = arg.data;
                }
                parseDataTooTree(arg);
                window.treeData = arg;
                window.treevm = new Vue({
                    el: '#menutree',
                    data: {
                        data: window.treeData
                    },
                    methods: {
                        append(data) {
                            layer.open({
                                type: 2,
                                title: "新增菜单",
                                moveOut: true, // 是否可拖动到外面
                                maxmin: true, // 显示最大化按钮
                                shadeClose: false,
                                shade: 0,
                                area: ['80%', '80%'],
                                content: "/sa-html/menu/menuadd.html",
                                // 解决拉伸或者最大化的时候，iframe高度不能自适应的问题
                                resizing: function (layero) {
                                    //console.log($('.layui-layer.layui-layer-iframe').length);
                                    $('.layui-layer-iframe').each(function () {
                                        let height = $(this).height();
                                        let title_height = $(this).find('.layui-layer-title').height();
                                        $(this).find('iframe').css('height', (height - title_height) + 'px');
                                    })
                                },
                                success: function (layero, index) {
                                    let iframeWin = window[layero.find('iframe')[0]['name']];
                                    iframeWin.setData(data);
                                }
                            });
                        },
                        remove(node, data) {
                            layer.confirm("该操作将会删除该节点及其所有子节点，确认要删除吗？", function (arg) {
								if (arg >= 1) {
									sa.delete('/resource/' + data.id, null, function () {
										layer.alert("删除成功");
                                        refreshTreeData();
                                    })
                                }
                            })
                        },
                        modify(node, data) {
                            layer.open({
                                type: 2,
                                title: "修改菜单",
                                moveOut: true, // 是否可拖动到外面
                                maxmin: true, // 显示最大化按钮
                                shadeClose: false,
                                shade: 0,
                                area: ['80%', '80%'],
                                content: "/sa-html/menu/menuadd.html",
                                // 解决拉伸或者最大化的时候，iframe高度不能自适应的问题
                                resizing: function (layero) {
                                    //console.log($('.layui-layer.layui-layer-iframe').length);
                                    $('.layui-layer-iframe').each(function () {
                                        let height = $(this).height();
                                        let title_height = $(this).find('.layui-layer-title').height();
                                        $(this).find('iframe').css('height', (height - title_height) + 'px');
                                    })
                                },
                                success: function (layero, index) {
									let iframeWin = window[layero.find('iframe')[0]['name']];
									iframeWin.setData(data, true);
								}
							});
						},
					}
				});
			});
		};
		window.loadTreeData();
	</script>
	<style>
		.custom-tree-node {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			padding-right: 8px;
			color: #2d8cf0;
		}

		.el-button--text, .el-button--text:focus, .el-button--text:hover {
			border: 1px #409EFF solid;
			padding: 4px;
		}

		body, .el-tree {
			background-color: #F5F5F5;
		}

		.el-tree-node {
			margin: 0.15em 0 !important;
		}

		/* 悬浮时颜色更深一点 */
		.el-tree-node__content:hover {
			background-color: #CFE8FC !important;
		}
	</style>
</html>